<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>

  <p><input id="mobile" type="text" placeholder="手机号码" value="18579105168"></p>
  <p>
    <input type="text" placeholder="验证码" size="10">
    <button onclick="getCode(this)" style="width: 90px;">获取验证码</button>
  </p>

  <script>
  var time = 5;
  function getCode(btn){
    var t = time;
    var text = btn.innerText;
    var mobileVal = mobile.value.trim();
    if(!/^1\d{10}$/.test(mobileVal)){
      alert('请输入有效的手机号码！');
      mobile.focus();
      return false;
    }

    //单击立即执行
    btn.innerText = t;
    btn.disabled = true;
    var int = setInterval(function(){
      t -= 1;
      if(t < 0){
        clearInterval(int);
        btn.disabled = false;
        btn.innerText = text;
        t = time;
      }else{
        btn.innerText = t;
      }
    },1000)
  }
  </script>
  
</body>
</html>